<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    
    <!-- <script src="d3.min.js"></script> -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script>
       const svg = d3.select('body').append('svg') ;
       svg.attr('width',800).attr('height',600).style('border','2px solid #ccc');

        const innerRadius = 100 ;

       {
        const arc = d3.arc();
        arc.cornerRadius(0);
        //arc.padAngle(Math.PI/8)
        const d = arc({
            innerRadius:innerRadius,
            outerRadius:200,
            startAngle:0,
            endAngle:Math.PI/2
        });

        svg.append('g')
            .attr('transform','translate(400,300)').append('path').attr('d',d).attr('stroke','#f00').attr('fill','#666');
        }

        {
        const arc = d3.arc();
        arc.cornerRadius(0);
        arc.padAngle(Math.PI/8)
        arc.padRadius(500);
        const d = arc({
            innerRadius:innerRadius,
            outerRadius:200,
            startAngle:0,
            endAngle:Math.PI/2
        });

        svg.append('g')
            .attr('transform','translate(400,300)').append('path').attr('d',d).attr('stroke','#f00').attr('fill','#666');
        }

        {
        const arc = d3.arc();
        arc.cornerRadius(0);
        const d = arc({
            innerRadius:innerRadius,
            outerRadius:200,
            startAngle:Math.PI/2,
            endAngle:Math.PI
        });

        svg.append('g')
            .attr('transform','translate(400,300)').append('path').attr('d',d).attr('stroke','#0f0').attr('fill','#888');
        }

    </script>
</body>
</html>